<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部布局 -->
      <el-header>
        <div >
          <img src="/favicon.ico" alt="" @click="refresh_page()" style="cursor:pointer">
          <span @click="refresh_page()" style="cursor:pointer">图片缩放工具</span>
        </div>
        <img src="/help.ico" alt="" @click="centerDialogVisible = true" style="cursor:pointer">
      </el-header>
      <div class="header_line"></div>
      <el-container>
        <el-container>
          <!-- 主要上传内容布局 -->
          <el-main >
            <div v-loading = "img_loading">
              <div id="show_input_upload"  >
                <!-- 上传框 -->
                <transition name="el-fade-in">
                        <!-- <div v-show="show1" class="transition-box">.el-fade-in</div> -->
                        <el-upload 
                          action = "#"  
                          accept = ".xbm,.tif,.pjp,.svgz,.jpg,.jpeg,.ico,.tiff,.gif,.svg,.jfif,.webp,.png,.bmp,.pjpeg,.avif"
                          v-show="show_upload_transition"
                          :class="upload-demo"
                          :drag=true
                          :multiple=false             
                          :auto-upload=false
                          :headers="headers"
                          :on-change="handleChange"
                          :show-file-list=false
                        >
                          <img class="upload_images_ico" src="/upload_images.ico"/>
                          <div class="el-upload__text">
                            可以把图片往这里拖拽哦 <em>点击选择图片</em>
                          </div>
                          <template #tip>
                            <div class="el-upload__tip">
                              照片文件最好不要超过500kb，否则会影响工具性能
                            </div>
                          </template>
                        </el-upload>
                </transition>
              </div>
              <!-- 预览图 -->
              <transition name="el-fade-in">
                <div class="show_upload_img" id="show_upload_img" v-show="!show_upload_transition">
                  <el-image :src="show_upload_src" alt="" @click="delete_img()" id="show_upload_src"></el-image>
              </div>
              </transition>
            </div>
          </el-main>
                <!-- 底部栏 -->
          <el-footer>
            <div class="Designed">
              <div>Designed by 江小鉴</div>
            </div>
          </el-footer>
        </el-container>
        <!-- 侧边栏 -->
        <el-aside width="300px">
          <div class="aside_line"></div>
          <div class="aside_main">
            <div style="height: 56px;"></div>
            <div style="margin-top: 20px;margin-left: 20px;font-size: 15px;display: flex;flex-direction: row;">
              <div>图片名：</div>
              <div style="color: #409EFF;">{{ show_file_name }}</div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;font-size: 15px;display: flex;flex-direction: row;">
              <div>图片大小：</div>
              <div style="color: #409EFF;">{{ show_file_size }}</div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;font-size: 15px;display: flex;flex-direction: row;">
              <div>图片原尺寸：</div>
              <div style="color: #409EFF;">{{ show_file_h_w }}</div>
            </div>
            <div class="ic_input_cont" style="margin-left: 20px;" >
              <div style="font-size: 15px;">高*宽：</div>
              <el-input v-model.number="input_h" placeholder="高度" class="ic_input" @input="chage_h()" oninput="value=value.replace(/[^0-9]/g,'')"/>
              <div class="fenge">*</div>
              <el-input v-model.number="input_w" placeholder="宽度" class="ic_input" @input="chage_w()" oninput="value=value.replace(/[^0-9]/g,'')"/>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;display: flex;flex-direction: row;">
              <div style="align-self: center;font-size: 15px">缩放比例：</div>
              <el-input-number v-model="sf_num" :precision="2" :step="0.1" :max="10" min="0.01" @change = "chage_sf()"/> 
            </div>
            <div style="display: flex;flex-direction: row;margin-top: 10px;">
              <el-checkbox v-model="keep_h_w" style="margin-left: 20px;font-size: 16px;zoom: 120%;align-self: center;" @change = "keep_hw_change()"></el-checkbox>     
              <div style="font-size: 15px;align-self: center;margin-left: 10px;">锁定图片高宽比例</div>
            </div>
            <div style="display: flex;flex-direction: row;margin-top: 10px;">
              <el-checkbox v-model="keep_data" style="margin-left: 20px;font-size: 16px;zoom: 120%;align-self: center;"></el-checkbox>     
              <div style="font-size: 15px;align-self: center;margin-left: 10px;">保持上一次参数</div>
            </div>
            <el-button  @click="button_upload()" :loading="uping" class="ic_button" type="primary">{{ buttonText }}</el-button>
          </div>

        </el-aside>
      </el-container>

    </el-container>
  </div>
  <!-- 捐赠框 -->
  <el-dialog v-model="centerDialogVisible" title="捐赠" width="320px" center>
    <div style="display: flex;flex-direction: column;">
      <span>
        &#12288;&#12288;感谢您访问本网站，我们衷心感谢您对本网站的支持和慷慨捐赠。您的捐赠将用于改善本网站的功能和性能，以及为用户提供更好的体验。
      </span>
      <div style="height: 10px;"></div>
      <div style="display: flex; flex-direction: row; justify-content: center;">
        <div style="display: flex;flex-direction: column;justify-content: center;">
          <el-image src="zhifubao.png" style="width: 120px;"></el-image>
          <div style="text-align: center;">支付宝</div>
        </div>
        <div style="width: 10px;"></div>
        <div style="display: flex;flex-direction: column;justify-content: center;">
          <el-image src="weixin.png" style="width: 120px;"></el-image>
          <div style="text-align: center;">微信支付</div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">
          感谢您 !
        </el-button>
      </span>
    </template>
  </el-dialog>
  </template>
<style>
/* 捐赠图标 */
::v-deep .el-icon-devops {
  background: url('/help.ico') center no-repeat; /* 			 注意此处的url，在这里引入自己的图片 */
  font-size: 12px;
  background-size: cover;
}

::v-deep .el-icon-devops:before {
  content: "替";
  font-size: 12px;
  visibility: hidden;
}



.el-header{
/* 固定在顶部 */
position: fixed;
top: 0;
z-index: 1000;
/* 宽度 */
width: 100vw;
/* 横向排列 */
flex-direction: row;
/* 高度*/
height: 55px;
/* 背景颜色 */
background-color: #FFFFFF;
/* //给头部设置一下弹性布局 */
display: flex;
/* // 让它贴标左右对齐 */
justify-content: space-between;
/* // 清空图片左侧padding */
padding-left: 1;
/* // 按钮居中 */
align-items: center;
/* // 文本颜色 */
color: #000000;
/* // 设置文本字体大小 */
font-size: 17px;
/* // 嵌套 */
> div{
  /* // 弹性布局 */
  display: flex;
  /* // 纵向上居中对齐 */
  align-items: center;
  /* // 给文本和图片添加间距，使用类选择器 */
  span{
    margin-left: 15px;
    }
    /* logo */
  >img{
    width:30px
  }
  }
/* 捐赠图标 */
> img{
  width: 25px; 
  align-self: flex-end;
  align-self: center;
}
}
/* 分割线 */
.header_line{
  background-color: #e9e9eb;
  height: 1px;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 1000;
  top: 55px;;
}
/* 主内容区 布局*/
.el-main{
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 30px);
  flex-direction: column;
>div{
  display: flex;
  flex-direction: column;
  }
}
/* 图片预览框 */
.show_upload_img{
  height: 100%;
  /* display: none;  */
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  display: block;
  position: relative;
}
/* 添加图片图标 */
.upload_images_ico{
  width:90px;
  /* height:90px; */
  
}
/* 添加图片框 */
.el-upload{
  width: 40vw;
}
/* 尺寸*分割 */
.fenge{
  margin-right: 10px;
}
/* 输入框容器 */
.ic_input_cont{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
}
/* 输入框 */
.ic_input {
  width: 90px;
  margin-right: 10px;
}
/* 按钮 */
.ic_button {
  margin-top: 10px;
  width: 80px;
  align-self: end;
  margin-right: 25px;
}
/* 底部栏 */
.el-footer{
  display: flex;  
  height: 30px;
  width: 100%;
  flex-direction: column;
}
.Designed{
  align-self: flex-end; 
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
>div{
  font-size: 12px;
  color: #94999e;
  }
}
/* 侧边栏 */
.el-aside{
  display: flex;
  flex-direction: row;
}
.aside_line{
  height: 100%;
  width: 1px;
  background-color: #e9e9eb;
}
.aside_main{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* .dialog-footer button:first-child {
  margin-right: 10px;
} */
</style>


<script>
import axios from 'axios';
import { ref, withScopeId } from 'vue'

// 服务器地址
const sevice_add = "http://imagecompression.top/";
var old_img_h = '';
var old_img_w = '';
export default{
  data() {
    return {
      //展示文件信息
      show_file_name : "",
      show_file_size : "",
      //缩放比例
      sf_num : ref(1),
      //保持界面中参数
      keep_data :ref(false),
      //保持纵横比
      keep_h_w : ref(true),
      //加载图片
      img_loading: ref(false),
      //捐赠对话框控制参数
      centerDialogVisible : ref(false),
      show_upload_transition : ref(true),

      //预览加载的本地照片
      show_upload_src:'',
      // 加载状态
      uping: false,
      buttonText: "确定",
      // 输入框
      input_h:"",
      input_w:"",

      //上传框
      dialogOfUpload: false,
      file_list: [],
      file:"",
      new_filename:"",
			headers: {
						'Content-Type': 'multipart/form-data'
      },
    }
  },
  methods:{
    //保持纵横比单选框
    keep_hw_change(){
        if(this.keep_h_w==true)
        {
          if( this.input_w!="")
          {
            this.input_w =parseInt((old_img_w/old_img_h)*this.input_h)
            document.getElementById('show_upload_src').style.height = this.input_h+'px';
            document.getElementById('show_upload_src').style.width = this.input_w+'px';
          }
        }
    },
    //缩放数据变化
    chage_sf(){
      this.input_h = parseInt(old_img_h*this.sf_num);
      this.input_w = parseInt(old_img_w*this.sf_num);
      document.getElementById('show_upload_src').style.height = this.input_h+'px';
      document.getElementById('show_upload_src').style.width = this.input_w+'px';

    },
    //高宽输入框数据变化
    chage_h(){
      if(this.keep_h_w==true)
      {
        this.input_w = parseInt((old_img_w/old_img_h)*this.input_h)
        this.sf_num = this.input_h/old_img_h
      }
      document.getElementById('show_upload_src').style.height = this.input_h+'px';
      document.getElementById('show_upload_src').style.width = this.input_w+'px';
      //console.log( this.input_h+'px')
    },
    chage_w(){
      if(this.keep_h_w==true)
      {
        this.input_h =parseInt((old_img_h/old_img_w)*this.input_w)
        this.sf_num = this.input_h/old_img_h
      }
      document.getElementById('show_upload_src').style.height = this.input_h+'px';
      document.getElementById('show_upload_src').style.width = this.input_w+'px';
      //console.log( this.input_h+'px')
    },
    //点击图片删除当前图片
    delete_img(){
      //没有选中保持上一次参数
      if(this.keep_data==false)
      {
        //恢复数据
        this.file = ""
        this.show_file_h_w = ""
        this.show_file_name = ""
        this.show_file_size = ""
        this.input_h = ""
        this.input_w = ""
        this.sf_num = 1
      }
      else{
        this.file = ""
        this.show_file_h_w = ""
        this.show_file_name = ""
        this.show_file_size = ""
      }

      //上传框恢复动画
      this.show_upload_transition = true;
      //恢复上传文件布局
      document.getElementById('show_input_upload').style.display = "flex";
      document.getElementById('show_upload_img').style.display = "none";

    },
    //刷新页面
    refresh_page(){
      window.location.reload();
      $router.go(0);
    },
    //上传按键
    button_upload(){
        if(this.file=="")
        {
          this.$message({
                  message: "请先选择图片",
                  duration: 2000
                  });
          return;
        }
       this.buttonText = "上传中"
       this.uping = true
       var new_filename = this.new_filename
       // 提交表单
       var param = new FormData();
       console.log(this.file)
       param.append("image", this.file.raw);
       param.append("height",this.input_h);
       param.append("width",this.input_w);
      //  this.file.forEach(
      //     (val, index) => {
      //       param.append("image", val.raw);
      //       param.append("height",this.input_h);
      //       param.append("width",this.input_w);
            
      //     }
      //   );

        console.log(this.input_h)
          // post请求
          axios({
            method:'post',
            url:sevice_add+"upload_image",
            data:param,
            responseType: 'blob'
          })
            .then((responce)=>{
                //取消按钮加载
                this.buttonText = "确定"
                this.uping = false
                //没有选中保持上一次参数
                if(this.keep_data==false)
                {
                  //恢复数据
                  this.file = ""
                  this.show_file_h_w = ""
                  this.show_file_name = ""
                  this.show_file_size = ""
                  this.input_h = ""
                  this.input_w = ""
                  this.sf_num = 1
                  //上传框恢复动画
                  this.show_upload_transition = true;
                  //恢复上传文件布局
                  document.getElementById('show_input_upload').style.display = "flex";
                  document.getElementById('show_upload_img').style.display = "none";
                }

                // 下载文件
                //console.log(responce)
                const link = document.createElement('a'); // 创建元素
                let blob = new Blob([responce.data]);
                link.style.display='none';
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download',new_filename) // 为下载后的文件命名
                document.body.appendChild(link)
                link.click(); // 点击下载
                document.body.removeChild(link) // 下载完成后移除元素
                window.URL.revokeObjectURL(link.href) // 释放blob对象\
              //   this.$message({
              //   message: "上传成功！",
              //   duration: 1000
              // });
            },err=>{
                //按钮加载
                this.buttonText = "确定"
                this.uping = false
                //恢复上传文件布局

                //上传框恢复动画
                this.show_upload_transition = true;
                document.getElementById('show_input_upload').style.display = "flex";
                document.getElementById('show_upload_img').style.display = "none";
       
                console.log(err);
                this.$message({
                  message: "请求出错啦！",
                  duration: 2000
                  });
              }
            );
    },
    //
    handleChange(file) { //文件改变
          this.img_loading = true
          //获取文件信息
          var file_name = file.raw['name']
          this.file = file
          this.new_filename = file_name.replace(/[.](?=(xbm|tif|pjp|svgz|jpg|jpeg|ico|tiff|gif|svg|jfif|webp|png|bmp|pjpeg|avif)$)/gi,"_ri.")
          console.log(this.new_filename);
          
          // 选取图片后自动回调，里面可以获取到文件
          var localFile=file.raw 

          // 转换操作可以不放到这个函数里面，
          // 因为这个函数会被多次触发，上传时触发，上传成功也触发

          let reader = new FileReader();
          reader.readAsDataURL(localFile);// 这里也可以直接写参数event.raw

          // 转换成功后的操作，reader.result即为转换后的DataURL ，
          // 它不需要自己定义，你可以console.log(reader.result)看一下
          reader.onload=(e)=>{

            //console.log(reader.result)
            //展示文件信息
            this.show_upload_src = reader.result;
            if (file.size<1000){
              this.show_file_size = file.size+" B";
            }
            else if(file.size>1000&&file.size<(1000*1000)){
              this.show_file_size = file.size/1000+" KB";
            }
            else{
              this.show_file_size = file.size/(1000*1000)+" MB";
            }
   
            //获取图片的高宽
            const img = new Image();
            img.src = e.target.result;
            img.onload = () =>{
              //没有选中保持上一次参数
              if(this.keep_data==false)
              {
                this.input_h = img.height;
                this.input_w = img.width;
              }
              old_img_h = img.height;
              old_img_w = img.width;
              this.show_file_name = file_name;
              this.img_loading = false
              this.show_file_h_w = img.height+"*"+img.width
              
              if (this.input_h=="")
              {
                document.getElementById('show_upload_src').style.height = img.height+'px';
                document.getElementById('show_upload_src').style.width = img.width+'px';
              }
              else
              {
                document.getElementById('show_upload_src').style.height = this.input_h+'px';
                document.getElementById('show_upload_src').style.width = this.input_w+'px';
              }

              //上传框消失动画
              this.show_upload_transition = false;
               document.getElementById('show_input_upload').style.display = "none";
               document.getElementById('show_upload_img').style.display = "flex";
            }
          }

				},
  }
}
</script>